

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充值中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <#include "../include/layui.ftl" />
    <script type="text/javascript" src="${path}/plug-in/js/qrcode.min.js"></script>
    <style>
        .container{
            display: block;
            height:100px;
            font-size: 16px;
            color: #666;

        }
        .code-tab{
            background: white;
            height: 260px;
        }
        .case-menu{
            text-align: center;
            cursor:pointer;
            maring-left:10px;
            display: block;
            margin:5px;
            float: left;
            width:22%;
            height: 80px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-family: "microsoft yahei"
        }
        .case-menu:hover{
            padding: 0;
            background: #fef3ee;
            border: 2px solid #f6644c;
        }
        .case-menu-active{
            padding: 0;
            background: #fef3ee;
            border: 2px solid #f6644c;
        }
        .case-menu:active{
            padding: 0;
            background: #fef3ee;
            border: 2px solid #f6644c;
        }
        .menu-all {
            display: block;
            height: 32px;
            line-height: 32px;
            font-size: 18px;
            color: #666;
            margin-top: 12px;
        }
        .unit {
            color: #f6644c;
            margin-right: 2px;
            font-weight: normal;
            font-family: "microsoft yahei";
        }
        .price {
            font-size: 24px;
            color: #f6644c;
            font-style: normal;
            font-family: Impact;
        }
        .menu-each {
            display: block;
            line-height: 20px;
            font-size: 14px;
            color: #aaa;
        }
        .checkBox {
            height: 18px;
            line-height: 18px;
            color: #999;
            margin:20px 0px;
            font-size: 14px;
        }
        .code-mask{
            background: rgba(0,0,0,0.6);
            width:110px;
            height:110px;
            text-align: center;
            color:#FFFFFF;
            cursor:pointer;
        }

    </style>
</head>
<body>

<div class="layui-fluid">
    <div id="products_container">

    </div>
    <div class="checkBox" id="introduce"></div>
    <div class="layui-tab code-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">
                <img src="${path}/icon/wechat_pay.png" style="width: 20px;height: 20px;margin-right: 2px;">
                微信支付
            </li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div style="width:100%;margin-top:40px;">
                    <div  style="padding: 5px;float: left;margin-left:190px;">
                        <#--<img  class="img-code" src="${path}/icon/QR_code.png">-->
                        <div id="code_mask" class="code-mask">
                            <div style="padding-top:30px;">
                                <img src="${path}/icon/refresh.png" style="z-index:2;width: 30px;height: 30px;">
                                <br/>立即充值
                            </div>
                        </div>
                        <div id="qrcode" style="display: none;"></div>
                    </div>
                    <div style="float: left;width:110px;padding:20px 15px;">
                        <div id="code_price" class="price" style="margin:5px 0px;"></div>
                        <div style="font-size: 12px;color:#AAAAAA; ">请使用微信扫码支付</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    layui.config({
        base: '${path}/plug-in/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','jquery'],function () {
        var form = layui.form,
                $ = layui.$;

        var recharge = {
            createOrderUrl:"/console/order/rewrite/createPayOrder",
            rechargeUrl:"/console/recharge/rewrite/recharge",
            queryOrderUrl:"/console/recharge/rewrite/queryOrder",
            loadProductUrl:"/console/product/rewrite/loadProduct",
            refreshTime:3000,
            activeProduct:null,
            products:null,//缓存 id:product的形式
            qrcode:null,
            orderId:null,
            interValObj:null,
            loadIndex:null,
            responseDesc:{
                SUCCESS:"支付成功",
                REFUND:"转入退款",
                NOTPAY:"未支付",
                CLOSED:"已关闭",
                REVOKED:"已撤销",
                USERPAYING:"用户支付中",
                PAYERROR:"支付失败"
            },
            init:function() {
                this.parseDom();
            },
            bindEvent:function(){
                var _this = this;
                $(".case-menu").click(function(){
                    var item =  $(this),id = item.attr("id");
                    $(".case-menu").removeClass("case-menu-active");
                    item.addClass("case-menu-active");
                    _this.activeProduct = _this.products[id];
                    _this.changeActive();
                    _this.showMask();
                });
                $("#code_mask").click(function(){
                    $("#qrcode").html("");
                    _this.createOrder();
                });
            },
            parseDom:function(){
                var _this = this,$container = $("#products_container"),products = {},html = [];
                $.getJSON(_this.loadProductUrl,{},function(rep){
                    if (!rep.flag || rep.data == null){
                        $container.html("暂无套餐");
                    } else {
                        html.push('<div class="container" >');
                        $.each(rep.data,function(i,item){
                            item.price = item.price / 100;
                            products[item.id] = item;//数据缓存
                            if (item.defaultChoice && _this.activeProduct == null) {
                                html.push('<div class="case-menu case-menu-active" id="'+item.id+'">');
                                _this.activeProduct = item;
                                _this.changeActive();
                                html.push('<span class="layui-badge" style="float:left;margin:-5px;">推荐</span>');
                            } else {
                                html.push('<div class="case-menu" id="'+item.id+'">');
                            }
                            html.push('<span class="menu-all"><b class="unit">¥</b><i class="price">'+ item.price+'</i> / '+ item.count+'次</span>');
                            html.push('<span class="menu-each">'+ item.name+'<span>');
                            html.push('</div>');
                        });
                        html.push('<div>');
                        $container.html(html.join(""));
                        _this.products = products;
                        _this.bindEvent();

                    }

                });
            },
            changeActive:function(){
                var _this = this;
                $("#introduce").text( _this.activeProduct.introduce || "");
                $("#code_price").html('<b class="unit">¥</b><i class="price" style="font-size: 32px;">'+ _this.activeProduct.price+'</i>');
            },
            createOrder:function(){//创建订单
                var _this = this;
                _this.showShade();
                $.getJSON(_this.createOrderUrl,{productId:_this.activeProduct.id},function(rep){
                    try {
                        if (!rep.flag || rep.data == null) throw new DOMException(rep.msg);
                        _this.orderId = rep.data.id;
                        _this.recharge();
                    } catch (e) {
                        _this.closeShade();
                        layer.msg(e.message);

                    }
                });
            },
            showShade:function(){
                this.loadIndex = layer.load(2, {shade: 0.1});
            },
            closeShade:function(){
                layer.close(this.loadIndex);
            },
            recharge: function(){//获取二维码地址
                var _this = this;
                $.getJSON(_this.rechargeUrl,{orderId:_this.orderId},function(rep){
                    try {
                        if (!rep.flag || rep.data == null) throw new DOMException(rep.msg);
                        _this.createQRCode(rep.data.codeUrl);
                    } catch (e) {
                        _this.closeShade();
                        layer.msg(e.message);

                    }
                });
            },
            createQRCode:function(codeUrl){//生成二维码图片
                this.qrcode = new QRCode("qrcode", {
                    text: codeUrl,
                    width: 110,
                    height: 110,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
                this.showCode();
                this.startTimer();
                this.closeShade();
            },
            showMask:function(){
                $("#qrcode").hide();
                $("#code_mask").show();
            },
            showCode:function(){
                $("#qrcode").show();
                $("#code_mask").hide();
            },
            startTimer:function(){
                var _this = this;
              _this.interValObj = setInterval(function(){
                  _this.queryOrder();
              },_this.refreshTime);
            },
            stopTimer:function(){
                window.clearInterval(this.interValObj);
            },
            queryOrder:function(){//查询订单状态
                try {
                    var _this = this;
                    $.getJSON(_this.queryOrderUrl,{orderId:_this.orderId},function(rep){
                        if (rep.flag) {
                            var order = rep.data;
                            if (order.version == 1) {
                                _this.stopTimer();
                                _this.showMask();
                                layer.msg(_this.responseDesc[order.orderStatus]);
                            }
                        }else {
                            _this.stopTimer();
                        }
                    });
                } catch (e) {
                    _this.stopTimer();
                }
            }
        };
        recharge.init();
    });
</script>
</body>
</html>
